<template>
    <div>
        <van-icon name="arrow-left" size="20" class="go-back" color="white" @click="goBack"/>
        <div v-show="!isNight" class="weather-one">
            <!--温度-->
            <div class="temp-now">
                {{weatherDate.temp}}
                <span>℃</span>
                <div class="temp-day">
                    {{weatherDate.temphigh}}℃/{{weatherDate.templow}}℃
                </div>
                <!--气候-->
                <div class="weather"  v-if="isLoadWeather">
                    {{weatherDate.weather}}&nbsp;&nbsp;空气质量{{weatherDate.aqi.quality}}
                </div>
            </div>
            <!--地点-->
            <div class="site">
                {{weatherDate.city}}
                <van-icon name="location-o" size="30"/>
                <!--风-->
                <div class="wind">
                    {{weatherDate.winddirect}}&nbsp;&nbsp;&nbsp;{{weatherDate.windpower}}
                </div>
            </div>
            <!--更新时间-->
            <div class="update">
                <div>
                    <van-icon name="browsing-history-o" size="20"/>
                    中国天气
                </div>
                <div class="time">
                    {{weatherDate.updatetime}}
                </div>
            </div>
            <!--未来天气-->
            <div class="future">
                <van-cell v-for="(item,index) in futureList" :key="index">
                    <div class="future-date">{{item.date}}</div>
                    <div class="future-weather">{{item.night.templow}}℃/{{item.day.temphigh}}℃</div>
                </van-cell>
            </div>
        </div>
        <div v-show="isNight" class="weather-two">
            <!--温度-->
            <div class="temp-now">
                {{weatherDate.temp}}
                <span>℃</span>
                <div class="temp-day">
                    {{weatherDate.temphigh}}℃/{{weatherDate.templow}}℃
                </div>
                <!--气候-->
                <div class="weather" v-if="isLoadWeather">
                    {{weatherDate.weather}}&nbsp;&nbsp;空气质量{{weatherDate.aqi.quality}}
                </div>
            </div>
            <!--地点-->
            <div class="site">
                {{weatherDate.city}}
                <van-icon name="location-o" size="30"/>
                <!--风-->
                <div class="wind">
                    {{weatherDate.winddirect}}&nbsp;&nbsp;&nbsp;{{weatherDate.windpower}}
                </div>
            </div>
            <!--更新时间-->
            <div class="update">
                <div>
                    <van-icon name="browsing-history-o" size="20"/>
                    中国天气
                </div>
                <div class="time">
                    {{weatherDate.updatetime}}
                </div>
            </div>
            <!--未来天气-->
            <div class="future">
                <van-cell v-for="(item,index) in futureList" :key="index">
                    <div class="future-date">{{item.date}}</div>
                    <div class="future-weather">{{item.night.templow}}℃/{{item.day.temphigh}}℃</div>
                </van-cell>
            </div>
        </div>
    </div>
</template>

<script>
    import {getWeather} from "../api/CMS-api"
    export default {
        created(){
            //获取当前时间
            const date = new Date();
            const hour = date.getHours();
            if(hour > 18 ||hour < 5){
                this.isNight =  true
            }else {
                this.isNight = false
            }
            getWeather('eed9a7a326471393', (localStorage.getItem('cityname'))).then(res =>{
                this.weatherDate = res.result;
                this.futureList = res.result.daily;
                this.isLoadWeather = true
            })
        },
        data() {
            return {
                isNight: false,
                weatherDate:{},
                futureList:[],
                isLoadWeather:false
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            }
        }
    }
</script>

<style lang="less" scoped>
    .go-back {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 101;
    }
    .weather-one {
        width: 100%;
        height: 200px;
        background-image: url("../assets/daytime.jpg");
        background-size: 100% 100%;
        position: relative;
        .temp-now {
            width: 40%;
            height: auto;
            position: absolute;
            top: 150px;
            left: 30%;
            font-size: 50px;
            text-align: center;
            span {
                font-size: 20px;
                position: absolute;
                top: 10px;
                font-weight: bold;
            }
            .temp-day {
                font-size: 17px;
                margin-top: 10px;
            }
            .weather {
                font-size: 17px;
            }
        }
        .site {
            width: 40%;
            height: 30px;
            position: absolute;
            top: 350px;
            left: 30%;
            text-align: center;
            font-size: 20px;
        }
        .update {
            width: 100%;
            height: 40px;
            position: absolute;
            display: flex;
            justify-content: space-between;
            top: 450px;
            padding: 0 10px;
            line-height: 40px;
            border-bottom: 1px solid #ededed;
            .time {
                margin-right: 20px;
            }
        }
        .future {
            position: absolute;
            top: 500px;
            .future-date {
                float: left;
            }
            .future-weather {
                float: right;
                margin-left: 200px;
            }
        }
    }
    .weather-two {
        width: 100%;
        height: 825px;
        background-color: thistle;
        background-image: url("../assets/night2.jpg");
        background-size: 100% 100%;
        color: white;
        .temp-now {
            width: 40%;
            height: auto;
            position: absolute;
            top: 150px;
            left: 30%;
            font-size: 50px;
            text-align: center;
            span {
                font-size: 20px;
                position: absolute;
                top: 10px;
                font-weight: bold;
            }
            .temp-day {
                font-size: 17px;
                margin-top: 10px;
            }
            .weather {
                font-size: 17px;
            }
        }
        .site {
            width: 40%;
            height: 30px;
            position: absolute;
            top: 350px;
            left: 30%;
            text-align: center;
            font-size: 20px;
        }
        .update {
            width: 100%;
            height: 40px;
            position: absolute;
            display: flex;
            justify-content: space-between;
            top: 450px;
            padding: 0 10px;
            line-height: 40px;
            border-bottom: 1px solid #ededed;
            .time {
                margin-right: 20px;
            }
        }
        .future {
            position: absolute;
            top: 500px;
            .future-date {
                float: left;
            }
            .future-weather {
                float: right;
                margin-left: 200px;
            }
        }
        /deep/ .van-cell {
            background-color: rgba(0,0,0,0);
        }
        /deep/ .van-cell__value--alone {
            color: white;
        }
    }
</style>